<!DOCTYPE html>
<html lang="vi">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <script src="dist/js/bootstrap.js" type="text/javascript"></script>

        <link href="img/paper_plane.png" rel="icon"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>Demo Index</title>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html" data-toggle="tooltip" data-placement="left" title="brand">
                            <span class="glyphicon glyphicon-send"></span>
                        </a>
                    </div>
                    <p class="navbar-text" data-toggle="tooltip" data-placement="left" title="Site name">FASmile <span class="badge">42</span></p>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active" data-toggle="tooltip" data-placement="bottom" title="Home page">
                                <a href="index.html">
                                    <span class="glyphicon glyphicon-home"></span>
                                    Index
                                </a>
                            </li>
                            <li>
                                <a href="signin.html" data-toggle="tooltip" data-placement="left" title="register page">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                    Sign In 
                                </a>
                            </li>
                            <li>
                                <a href="view.html" data-toggle="tooltip" data-placement="left" title="View page">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    View 
                                </a>
                            </li>
                            <li>
                                <a href="post.html" data-toggle="tooltip" data-placement="left" title="Post page">
                                    <span class="glyphicon glyphicon-file"></span>
                                    Post 
                                </a>
                            </li>
                            <li>
                                <a href="upload.html" data-toggle="tooltip" data-placement="left" title="Upload page">
                                    <span class="glyphicon glyphicon-open"></span>
                                    Upload 
                                </a>
                            </li>
                            <li>
                                <a href="list.html" data-toggle="tooltip" data-placement="left" title="List page">
                                    <span class="glyphicon glyphicon-th-list"></span>
                                    List 
                                </a>
                            </li>
                        </ul>

                        <form class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                                <button type="submit" class="btn btn-default">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                </button>

                            </div>
                        </form>
                    </div>
                </div>
            </nav>
        </header>

        <footer class="container">
            <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
                <div class="container">
                    <address>
                        <font color="red"><strong>Author: </strong></font><font color="green"><strong>Lương Thế Hai</strong></font>
                        <br/>
                        <strong>Email: </strong><a href="#">FASmile1404@gmail.com</a>
                    </address>
                </div>
            </nav>

        </footer>

        <div class="container" style="margin-top: 55px; width: 80%;">
            <blockquote class="blockquote-reverse">
                <p>The quieter you become, the more you can hear.</p>
                <footer> - <cite title="Source Title">Goodreads</cite></footer>
            </blockquote>


            <dl class="dl-horizontal">
                <dt>Description lists</dt>
                <dd>A description list is perfect for defining terms.</dd>
                <dt>Euismod</dt>
                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                <dt>Malesuada porta</dt>
                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                <dt>Felis euismod semper eget lacinia</dt>
                <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
            </dl>
            <div class="media">
                <a class="media-left" href="#">
                    <img data-holder-rendered="true" src="" style="width: 64px; height: 64px;" data-src="holder.js/64x64" alt="64x64">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">Top aligned media</h4>
                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                </div>
            </div>
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="//www.youtube.com/watch?v=VqRkSBIa1Hw?rel=0"></iframe>
            </div>
        </div>
    </body>
</html>